import React, { Component } from 'react'
//导入css
import '../assets/css/Coupon.css'
//导入接口请求数据
import { couponRequest } from '../request/uncenter_request'
//导入登录的信息
import { userinfo } from '../utils/getUserInfo'
//导入时间戳的转换
import { dateFmt } from '../utils/getUserInfo'
import Header from "../components/DefaultHeader"

export default class Coupon extends Component {
    state = {
        index: 0,
        coupon_list: [{ content: [] }, { content: [] }, { content: [] }]
    }
    UNSAFE_componentWillMount() {
        let uid = userinfo().uid
        couponRequest(uid).then(res => {
            this.setState({ coupon_list: res.list })
        })
    }
    render() {
        const { index, coupon_list } = this.state
        return (
            <div id='Coupon'>
                <div className="coupon-container">
                    <Header title='优惠券'/>
                    <div className="tabs">
                        <div className={index === 0 ? 'active' : ''} onClick={() => this.setState({ index: 0 })}>未使用</div>
                        <div className={index === 1 ? 'active' : ''} onClick={() => this.setState({ index: 1 })}>已使用</div>
                        <div className={index === 2 ? 'active' : ''} onClick={() => this.setState({ index: 2 })}>已失效</div>
                    </div>
                    <div className="list">
                        {
                            coupon_list[index].content.map(item => (
                                <div className="item" key={item.id}>
                                    <div className="content">
                                        <div className="price">
                                            <h2>&yen; <span>{item.money}</span></h2>
                                            <small className="tips">满{item.limit_money}元可用</small>
                                        </div>
                                        <div>
                                            <p>{item.title}</p>
                                            <small>{dateFmt(item.begintime)}至{dateFmt(item.endtime)}</small>
                                        </div>
                                    </div>
                                    <div className="rules">
                                        {item.description}
                                    </div>
                                </div>
                            ))
                        }
                    </div>
                </div>
            </div>
        )
    }
}
